<template>
    <div id="condition">
        <el-container>
            <el-header style="background-color: red">
                <el-button @click="viewCondition()">预览</el-button>
            </el-header>
            <el-main style="background-color: white;margin-top: -10px">
                <condition-comp :condition-data="conditionData"></condition-comp>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import conditionComp from './ConditionComp'
    export default {
        name: 'test-condition',
        data () {
            return {
                conditionData: [
                    {
                        spanNum: 4,
                        spanNumQ: 4,
                        offsetNumQ: 0,
                        ifShow: true,
                        ifShow2: true,
                        children: []
                    }

                ]
            }
        },
        components: {
            conditionComp
        },
        methods: {
            viewCondition () {
                let a = this.conditionData
                debugger
                console.info(a)
            }
        }

    }
</script>

    <style lang="stylus" rel="stylesheet/stylus">
    #condition
        margin-top 10px
        .el-row {
            margin-bottom: 5px;
            &:last-child {
                margin-bottom: 0;
            }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
